<template>
  <view class="card">
    <!-- 左图右文布局（有图时） -->
    <view class="content" v-if="image">
      <image :src="image" class="news-image" mode="aspectFill"></image>
      <view class="text-content">
        <text class="title">{{ title }}</text>
        <view class="meta">
          <text class="sticky" v-if="isTop">置顶</text>
          <text class="source">{{ source }}</text>
          <text class="comment">{{ commentCount }}评</text>
          <text class="date">{{ date }}</text>
        </view>
      </view>
    </view>
    <!-- 纯文字布局（无图时） -->
    <view v-else class="text-only">
      <text class="title">{{ title }}</text>
      <view class="meta">
        <text class="sticky" v-if="isTop">置顶</text>
        <text class="source">{{ source }}</text>
        <text class="comment">{{ commentCount }}评</text>
        <text class="date">{{ date }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "cardViewText",
  data() {
    return {
      defaultPic: "/static/011.png",
      failPic: "/static/012.png",
      status: 'news',
      imageError: false
    };
  },
  computed: {
    showImage() {
      // 适配原有单个image属性，转换为数组形式处理
      const imgList = this.image ? [this.image] : this.images;
      if (imgList[0]) {
        if (this.imageError) {
          console.log("showImage Error--> " + this.title);
        }
        return this.imageError ? this.failPic : imgList[0];
      } else {
        console.log("showImage Default--> " + this.title);
        return this.defaultPic;
      }
    },
    authorColor() {
      const colorMap = {
        news: '#aaa',
        ad: '#00f'
      };
      return {
        color: colorMap[this.status] || '#f33'
      };
    }
  },
  mounted() {
    // 根据模式设置状态（广告/新闻）
    if (this.mode === 3) {
      this.status = "ad";
    }
  },
  methods: {
    handleImageException() {
      console.log("handleImageException " + this.title);
      this.imageError = true;
    },
    handleImageError(index) {
      console.log("handleImageError----->:" + this.title);
      console.log("handleImageError----->index:" + index);
      this.$set(this.images, index, this.failPic);
    }
  },
  props: {
  
    title: { 
      type: String, 
      default: "",
      required: true 
    },
    isTop: { 
      type: Boolean, 
      default: false,
      required: true 
    },
    source: { 
      type: String, 
      default: "",
      required: true 
    },
    commentCount: { 
      type: String, 
      default: "0",
      required: true 
    },
    date: { 
      type: String, 
      default: "" 
    },
    image: { 
      type: String, 
      default: "" 
    },
   
    nid: {
      type: String,
      default: "000",
      required: true
    },
    mode: {
      type: Number,
      default: 1,
      required: true
    },
    author: {
      type: String,
      default: "来源",
      required: true
    },
    comments: {
      type: Number,
      default: 0,
      required: true
    },
    time: {
      type: String,
      default: "2025.1.1"
    },
    images: {
      type: Array,
      default: () => []
    },
    showSearch: {
      type: Boolean,
      default: false
    },
    bgColor: {
      type: String,
      default: '#fff'
    }
  }
};
</script>

<style scoped>
.card {
  margin: 20rpx;
  border-radius: 10rpx;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.content {
  display: flex;
  gap: 20rpx;
  align-items: flex-start;
}
.news-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
}
.text-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.text-only {
  display: flex;
  flex-direction: column;
}
.title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  line-height: 44rpx;
  display: block;
  margin-bottom: 10rpx;
}
.meta {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
  gap: 20rpx;
  flex-wrap: wrap;
}
.sticky {
  color: #f00;
  padding: 2rpx 10rpx;
  border: 1rpx solid #f00;
  border-radius: 4rpx;
  font-size: 22rpx;
}
.source {
  color: #007aff;
}
.date {
  margin-left: auto;
}
</style>